<template>
  <div>
    <BasicTable @register="registerTable" @fetch-success="onFetchSuccess">
      <template #toolbar>
        <a-button @click="aoaToExcel"> 导出</a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
             label:'编辑',
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <Modal @register="registerModal" @success="handleSuccess"/>
    <a-modal v-model:visible="taskModelVisible" title="为用户追加任务" :confirm-loading="confirmLoading"
             @ok="handleOk">
      <div class="flex-row">
        <div class="row-name">选择追加任务{{ taskForm.task_id }}</div>
        <div class="row-input">
          <a-select
            class="select"
            ref="select"
            v-model:value="taskForm.task_id"
            @focus="focus"
          >
            <a-select-option v-for="item in taskList" :value="item.id">{{
                item.title
              }}
            </a-select-option>
          </a-select>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts">
import {defineComponent, nextTick, ref} from 'vue';

import {BasicTable, TableAction, useTable} from '/@/components/Table';
import {pushTaskByTeacher, TeacherDel, TeacherList} from '/@/api/teacher/teacher';
import {useModal} from '/@/components/Modal';
import Modal from './Modal.vue';
import taskModal from './Modal.vue';
import {columns, searchFormSchema} from './schema.data';
import {usePermission} from '/@/hooks/web/usePermission';
import {TaskCenterList} from "/@/api/taskCenter/taskCenter";
import {message} from "ant-design-vue";
import {aoaToSheetXlsx} from "/@/components/Excel";
import {getTaskTypeList} from "/@/api/taskCenter/taskType";

export default defineComponent({
  name: 'TeacherManagement',
  components: {BasicTable, taskModal, Modal, TableAction},
  mounted() {
    this.$nextTick(function () {
      // 仅在整个视图都被渲染之后才会运行的代码
      TaskCenterList().then(res => {
        console.log('res.result', res)
        this.taskList = res
      })
    })
  },
  setup() {
    const taskModelVisible = ref(false);
    const confirmLoading = ref(false);
    let taskForm = {
      teacher_id: '',
      task_id: ''
    };
    const taskList: any = ref([]);
    const headers: any = ref([])

    const {hasPermission} = usePermission();
    const [registerModal, {openModal}] = useModal();
    const [registerTable, {reload, expandAll, getColumns, getDataSource,setProps}] = useTable({
      title: '教师工作量分配',
      api: TeacherList,
      columns,
      formConfig: {
        labelWidth: 120,
        schemas: searchFormSchema,
      },
      isTreeTable: true,
      pagination:{
        pageSize: 10,
        pageSizeOptions:['10', '20', '50', '100', '500']

      },
      striped: false,
      useSearchForm: true,
      showTableSetting: true,
      bordered: true,
      showIndexColumn: false,
      canResize: false,
      actionColumn: {
        width: 250,
        title: '操作',
        dataIndex: 'action',
        slots: {customRender: 'action'},
        fixed: 'right',
        ifShow: true,
      },
      afterFetch:(e)=>{
        setProps({
          title:`教师工作量分配(${e.length})`
        })
      }
    });

    async function aoaToExcel() {
      let headersTitle = getColumns().filter(f => !f.defaultHidden).map(f => f.title);
      headersTitle.splice(headersTitle.length - 1, 1);
      let headersKey = getColumns().filter(f => !f.defaultHidden).map(f => f.dataIndex);
      headersKey.splice(headersKey.length - 1, 1);
      let outData = getDataSource().map((f) => {
        return headersKey.map((key) => {
          return f[key!] ?? '';
        });
      })
      // 保证data顺序与header一致
      aoaToSheetXlsx({
        data: outData,
        header: headersTitle,
        filename: '教师工作达标分数分配表' + new Date().getTime() + '.xlsx',
      });
    }

    function handleCreate() {
      openModal(true, {
        isUpdate: false,
      });
    }

    function handleEdit(record: Recordable) {
      openModal(true, {
        record,
        isUpdate: true,
      });
    }

    function handleAddTask(record: Recordable) {
      console.log('追加任务', record)
      taskForm.teacher_id = record.id
      taskModelVisible.value = true;
    }

    function handleOk() {
      if (!taskForm.task_id) {
        return message.error('请选择追加任务')
      }
      confirmLoading.value = true;
      pushTaskByTeacher(taskForm).then(res => {
        console.log('追加任务res', res)
        message.success('任务追加成功')
        taskModelVisible.value = false;
        confirmLoading.value = false;
      })
    }

    function handleDelete(record: Recordable) {
      TeacherDel({id: record.id}).then(() => {
        reload();
      });
    }

    function handleSuccess() {
      reload();
    }

    function onFetchSuccess() {
      nextTick(expandAll);
    }

    return {
      registerTable,
      registerModal,
      handleOk,
      confirmLoading,
      taskForm,
      taskList,
      taskModelVisible,
      aoaToExcel,
      handleCreate,
      handleAddTask,
      handleEdit,
      handleDelete,
      handleSuccess,
      hasPermission,
      onFetchSuccess,
    };
  },
});
</script>
<style scoped lang="less">
.flex-row {
  display: flex;
  align-items: center;
  padding: 28px;
  box-sizing: border-box;
  line-height: 40px;
}

.row-name {
  width: 120px;
  margin-right: 10px;
}

.row-input {
  flex: 1;

  .ant-select {
    width: 100%;
  }
}
</style>
